<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>189-获取首屏渲染时间</title>
    <style></style>
  </head>

  <body>
    <div class="box">
      <p>
        文章参考：
        <a href="https://mp.weixin.qq.com/s/pX7qNYK-f1AaSn6RXA05Uw" target="_blank">
          快用上PerformanceObserver，别再手动计算首屏时间了
        </a>
      </p>
      <p>
        更好用的首屏时间获取工具 lighthouse
        <a href="http://t.zoukankan.com/wenxuehai-p-14236426.html" target="_blank">
          性能测评工具lighthouse的基本使用
        </a>
      </p>
    </div>
    <script>
      function watchFcp() {
        // 使用 PerformanceObserver 监听 fcp
        if (!PerformanceObserver) return
        try {
          const type = 'paint'
          if ((PerformanceObserver.supportedEntryTypes || []).includes(type)) {
            observer = new PerformanceObserver((entryList) => {
              for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
                const { startTime, duration } = entry
                console.log('[assets-load-monitor] PerformanceObserver fcp:', startTime + duration)

                // 上报startTime操作
              }
            })
            observer.observe({
              entryTypes: [type]
            })
            return
          }
        } catch (e) {
          // ios 不支持这种entryTypes，会报错 https://caniuse.com/?search=PerformancePaintTiming
          console.warn('[assets-load-monitor] PerformanceObserver error:', (e || {}).message ? e.message : e)
        }
      }
      watchFcp()
    </script>
  </body>
</html>
